<template>
  <section v-if="row.toAddress"
           class="shipment-sender-info">
    <p :class="classFlag">{{ area }}<br />{{ address }}</p>
  </section>
</template>

<script>
export default {
  name: "WaybillConsigneeSenderAddress",
  props: {
    row: {
      type: Object,
      default: () => { }
    },
    classFlag: {
      type: String,
      default: ""
    }
  },
  computed: {
    area () {
      const { toProvince, toCity, toDistrict } = this.row;
      return `${toProvince}${toCity}${toDistrict}`
    },
    areaSymbol () {
      const { toProvince, toCity, toDistrict } = this.row;
      return `${toProvince}/${toCity}/${toDistrict}/`
    },
    address () {
      const { toAddress } = this.row;
      if (toAddress && typeof (toAddress) == 'string') {
        if (toAddress.includes(this.area)) {
          return toAddress.substring(this.area.length, toAddress.length)
        }
        if (toAddress.includes(this.areaSymbol)) {
          return toAddress.substring(this.areaSymbol.length, toAddress.length)
        }
      }
      return toAddress
    },
  },
};
</script>
<style scoped>
.shipment-sender-info p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.red {
  color: var(--prev-color-text-red);
}
</style>
